<template>
    <div class="internal">
        <return-internal :title="$route.params.item"></return-internal>
        <div class="addbank">
            <van-form @submit="onSubmit">
                <van-field v-model="username" label="姓名" placeholder="请输入真实姓名" class="item" key="1" />
                <van-field v-model="banknumber" label="银行卡号" placeholder="请输入银行卡号" class="item" key="2"
                    :rules="[{ pattern: /^\d{19}$/, message: '请输入正确内容' }]" />
                <van-cell title="开户银行" is-link :value="bankname" class="item" @click="show = true" />
                <van-field v-model="phonenumber" label="开户手机号" placeholder="请输入手机号" class="item" key="3"
                    :rules="[{ pattern: /^\d{11}$/, message: '请输入正确内容' }]" />
                <van-field v-model="idnumber" label="身份证号" placeholder="请输入身份证号" class="item" key="4" name="pattern"
                    :rules="[{ pattern: /^\d{18}$/, message: '请输入正确内容' }]" />
                <van-field v-model="checknumber" label="验证码" placeholder="请输入验证码" class="item" key="5" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
                <div class="getnumber" @click="getnumberAction" ref="num">
                    获取验证码
                </div>
            </van-form>
            <van-action-sheet v-model="show" :actions="actions" @select="onSelect" description="请选择银行" cancel-text="取消"
                close-on-click-action />
        </div>
    </div>
</template>

<script>
import { Field, Form, Button, Cell, ActionSheet, Toast } from 'vant'
import axios from 'axios';
import { set } from 'vue';
export default {
    components: {
        [Field.name]: Field,
        [Form.name]: Form,
        [Button.name]: Button,
        [Cell.name]: Cell,
        [ActionSheet.name]: ActionSheet
    },
    data() {
        return {
            username: '',
            banknumber: '3435624584561482681',
            bankname: '',
            phonenumber: '13454234851',
            idnumber: '456512642790358149',
            checknumber: '',
            show: false,
            actions: [{ name: '中国农业银行' }, { name: '中国招商银行' }, { name: '中国建设银行' }, { name: "中国工商银行" }, { name: "中国人民银行" }],
            checknums: null
        }
    },
    methods: {
        async onSubmit() {
            if (this.checknums == null) {
                Toast("请先接收验证码")
                return
            }
            if (this.checknumber != this.checknums) {
                Toast('请填写正确的验证码')
                this.$refs.num.innerHTML = '重新获取';
                this.checknumber = ''
                return
            }
            let res = await axios.request({
                method: "post",
                url: "/api/patient/inquireinfo",
                data: { name: this.username, idcard: this.idnumber },
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token"),
                },
            });
            console.log(res);
            if (res.data.data == null) {
                Toast('此人还未建档，不可绑卡')
                return
            }
            let data = await axios.request({
                method: "post",
                url: "/api/bank/addbank",
                data: { name: this.username, bankid: this.banknumber, bankname: this.bankname, phonenumber: this.phonenumber, idcard: this.idnumber },
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token"),
                },
            });
            console.log(data);
            Toast('绑定成功')
        },
        onSelect(item) {
            this.show = false;
            this.bankname = item.name
        },
        getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },
        getnumberAction() {
            let sum = 60;
            let rendernum = this.getRandomIntInclusive(13, 30)
            this.$refs.num.innerHTML = 60 + 's';
            let carry = 0;
            let time = setInterval(() => {
                sum--;
                carry++;
                if (carry == rendernum) {
                    clearInterval(time);
                    let checknum = this.getRandomIntInclusive(100000, 999999)
                    this.$refs.num.innerHTML = checknum;
                    this.checknums = checknum;
                    return
                }
                if (sum < 0) {
                    clearInterval(time);
                }
                this.$refs.num.innerHTML = sum + 's';
            }, 1000);
        }
    }
}
</script>


<style scoped lang="scss">
@function vw($px) {
    @return ($px/375) * 100vw;
}

* {
    margin: 0;
    padding: 0;
}

.addbank {
    position: relative;
    top: 44px;
    width: vw(338);
    margin: vw(20) auto;

    ::v-deep .van-form {
        border-radius: vw(5);
    }

    .item {
        width: 100%;
        height: vw(44);
        display: flex;
        align-items: center;

        ::v-deep .van-cell__title {
            margin-left: vw(10);
        }
    }
}

.van-action-sheet__description {
    display: flex;
    justify-content: center;
    align-items: center;
    height: vw(44);
}

.van-action-sheet__item,
.van-action-sheet__cancel {
    height: vw(55);
}

.van-cell__value {
    // position: fixed;
    display: flex;
    // justify-items: flex-start;
    // position: relative;
    // left: vw(122);
    // top: vw(120);
    flex: 1;
    // margin-left: vw(-122);
}

.van-icon {
    margin-right: vw(10);
}

.getnumber {
    position: absolute;
    top: vw(220);
    right: vw(10);
    width: vw(60);
    height: vw(44);
    font-size: vw(12);
    color: #2EC7C9;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>